<template>
  <div id="FloorManage" class="page-wrapper">
    <div class="selector-wrapper main-card wrapper">
      <div class="main-card">
        <el-form class="form" :inline="true" ref="form" :model="formData">
          <el-form-item label="商品名称">
            <el-input
              v-model.trim="formData.goodsName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="等级">
            <el-select v-model="formData.grade" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </el-form>
      </div>
      <el-button type="primary" @click="handleSubmitClick">获取数据</el-button>
    </div>

    <h1 class="main-title">分类统计</h1>
    <div class="wrapper main-card">
      <div>
        <el-table :data="totalData" style="width: 100%">
          <el-table-column label="商品等级">
            <template slot-scope="scope">
              <span>
                {{
                  scope.row.grade === '1'
                    ? '甄选品'
                    : scope.row.grade === '2'
                    ? '优选品'
                    : scope.row.grade === '3'
                    ? '一级品'
                    : scope.row.grade === '4'
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsNumber"
            label="商品销量"
          ></el-table-column>
          <el-table-column prop="totalMoney" label="销售总额"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- <h1 class="main-title">明细统计</h1> -->

    <!-- <div class="wrapper main-card">
      <div>
        <el-table :data="pageData" style="width: 100%">
          <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
          <el-table-column label="商品等级">
            <template slot-scope="scope">
              <span>
                {{
                  scope.row.grade === 1
                    ? '甄选品'
                    : scope.row.grade === 2
                    ? '优选品'
                    : scope.row.grade === 3
                    ? '一级品'
                    : scope.row.grade === 4
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="goodsMoney" label="商品价格"></el-table-column>
          <el-table-column
            prop="goodsNumber"
            label="销售数量"
          ></el-table-column>
          <el-table-column prop="totalMoney" label="销售金额"></el-table-column>
          <el-table-column label="订单状态">
            <template slot-scope="scope">
              <span>{{ scope.row.state === 1 ? '未完成' : '已完成' }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { getreport, searchreport } from '@/api/pcclinet'

export default {
  components: {},
  data() {
    return {
      currentPage: 1,
      pageData: [],
      total: '',
      pageSize: 10,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      region: '',
      layer: '',
      formData: {},
      pageData: {},
      totalData: {},
      tableData: [],
      options2: [
        { value: 1, label: '甄选品' },
        { value: 2, label: '优选品' },
        { value: 3, label: '一级品' }
      ]
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    queryByPage() {
      // 起始位置 = (当前页 - 1) x 每页的大小
      const start = (this.currentPage - 1) * this.pageSize
      // 结束位置 = 当前页 x 每页的大小
      const end = this.currentPage * this.pageSize

      return this.tableData.slice(start, end)
    },
    handleSizeChange(val) {
      this.pageSize = val

      this.pageData = this.queryByPage()
    },

    handleCurrentChange(val) {
      this.currentPage = val

      this.pageData = this.queryByPage()
    },

    // 获取服务器数据
    fetchData() {
      // 数据接口
      getreport().then(res => {
        //  console.log(res)
        this.tableData = res.data.orderlist
        this.pageData = res.data.orderlist
        this.totalData = res.data.ordertotal
        this.total = res.data.orderlist.length
        this.pageData = this.queryByPage()
      })
    },

    // 提交搜索请求
    handleSubmitClick() {
      const { goodsName, grade } = this.formData || null
      const [strTime, endTime] = this.value2 || []

      const params = {
        goodsName,
        grade,
        strTime,
        endTime
      }
      //  console.log(params)

      searchreport(params).then(res => {
        //  console.log(res)
        this.tableData = res.data.orderlist
        this.totalData = res.data.ordertotal
        this.total = res.data.orderlist.length
        this.pageData = this.queryByPage()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  margin: 40px 0;
}

.selector-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 垂直居中 */
}

.list-wrapper {
  margin-top: 40px;
}

.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
.form-item-wrapper {
  display: flex;
  justify-content: space-between;
}
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* Adjust margin as needed */
}
</style>
